<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
<style type="text/css">
.yuyueli,.yuyueul{
	display: block;
	padding: 0 0.5rem 0 0.5rem;
}
.yuuyeli{
	width: auto;
	height: auto;
	padding:1.5rem 1rem 1.5rem 1rem;
	background:#fff;
	margin-top: 1rem;
	box-shadow:0 0 1px #ccc;
	-webkit-box-shadow:0 0 1px #ccc;
	position: relative;
	border-radius: 0.4rem;
}
.yuuyeli-year{
	background: transparent;
	box-shadow:none;
	-webkit-box-shadow:none;
	padding: 0;
}
.chepai{
	font-weight:bold;
	
}
.sisdian{
	color: #999;
	padding: 0.5rem 0 0.5rem 0;
}
.yuyueincfo{
	font-size:14px;
	padding: 5px 0 5px 0;
}
.yylabel{
	color: #555;
}
.fr{
	float: right;
}
.yuyuedate{
	color: #999;
}
.status{
	position: absolute;
	top: 0;
	right:1rem;
	width:5rem;
	height: 2rem;
	line-height:2rem;
	background: dodgerblue;
	font-size:12px;
	padding: 0 0.5rem 0 0.5rem;
	color: #fff;
	text-align: center;
}
.status.errostatus{
	background: orange;
}
.errotip{
	font-size:14px;
	color:orangered;
	padding-top:0.5rem;
}
.yuyueincfo .yuyueincfo-la{
	color: #555;
	padding-right: 1rem;
}
</style>
</head>
<body>
<div class="jcontent">
	
	<div id="nodatas" class="nodatas">
		<span class="nodatas-icon"><i class="iconfont icon-wjl nodataicons"></i></span>
		<div class="nodata-tip">空空如也，没有找到数据</div>
	</div>
	
	<ul id="data-list" class="yuyueul"></ul>
	<div id="loadingMore" class="hide">数据加 载中...</div>
</div>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/page.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.plusReady(function(){
//	alert(webapp.util.dateFormat(1347497754133,'yyyy'))
	_currentWebview=plus.webview.currentWebview();
	window.setTimeout(function(){
		//加载数据
		loadUtil.loadList({
			url:"/carLife/admin/interface/order/selectOrdersByUserId"
		});
		
		//滚动到底部 
		document.addEventListener( "plusscrollbottom",function(){
			loadUtil.scrollBottom();
		}, false );
		//下拉加载最新数据 
		_currentWebview.setPullToRefresh(webapp.config.pullRefresh,function(){
			loadUtil.pullToRefresh();
		});
		
	},350);
	
	//取消预约
	//车辆的点击
	mui('#data-list').on('tap','.yuuyeli', function() {
		var　id=this.getAttribute("data-id");
		var btnArray = [{title:"取消预约"}];
		plus.nativeUI.actionSheet( {
			title:"操作",
			cancel:"返回",
			buttons:btnArray
		},function(e){
			if(e.index==1){
				plus.nativeUI.prompt( "取消原因：", function(e){
					if(e.index==0){
						quxiaoyy(id,e.value);
					}
				},"", "临时有事，不能按时到达！", ["确认","返回"]);
			}
		});
	});
});

function quxiaoyy(id,s){
	if(webapp.util.isNull(s)){
		s="临时有事，不能按时到达！";
	}
	webapp.ajax({
		url:"/carLife/admin/interface/order/cancelOrder",
		data:{
			orderId:id,
			noPassReason:s
		},
		success:function(json){
			if(json.code="200"){
				mui.toast("取消成功");
				document.getElementById("data-list").innerHTML="";
				loadUtil.loadList({
					url:"/carLife/admin/interface/order/selectOrdersByUserId"
				});
			}else{
				mui.toast(json.msg);
			}
		}
	});
}
</script>

<script id="tpl-list" type="text/html">
	{{each data as item i}}
		<li class="yuuyeli" data-id="{{item.id}}">
			<div class="chepai">{{item.licensePlate}}（{{item.brandName}}{{item.modelName}}）</div>
			<div class="yuyueincfo">
				<span class="yylabel">4S店名称：</span>{{item.sellerName}}
			</div>
			<div class="yuyueincfo">
				<span class="yylabel">预约时间：</span>{{dateFormat(item.createTime,'yyyy年MM月dd日 HH点mm分')}}
			</div>
			<div class="yuyueincfo">
				<span class="yylabel">保养时间：</span>{{dateFormat(item.orderDate,'yyyy年MM月dd日  HH点mm分')}}
			</div>
			{{if item.state==0}}
				<div class="status">已预约</div>
			{{else if item.state==1}}
				<div class="status">已完成</div>
			{{else if item.state==2}}
				<div class="status errostatus">预约失败</div>
				<div class="errotip">4s店留言：{{item.noPassReason}}</div>
			{{else if item.state==3}}
				<div class="status errostatus">已取消</div>
				<div class="errotip">{{item.noPassReason}}</div>
			{{/if}}
		</li>
	{{/each}}
</script>
</body>
</html>
